<template>
    <div>
        <div class="header" style="background-color: white">
            <el-page-header @back="goBack" content="流程界面">
            </el-page-header>
        </div>
        <el-divider></el-divider>
        <el-form :inline="true" :model="flow" class="demo-form-inline">
            <el-form-item label="流程名称">
                <el-input v-model="flow.flowName" placeholder="流程名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
            <el-button @click="addBtn">添加</el-button>
        </el-form>

        <el-table
                :data="pageResult.records"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="flowId"
                    label="编号"
                    width="260">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="flowName"
                    label="编号"
                    width="270">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="flowRemark"
                    label="描述"
                    width="280">
            </el-table-column>
            <el-table-column
                    fixed
                    prop="authorityName"
                    label="所属模块"
                    width="280">
            </el-table-column>
            <el-table-column
                    prop="isvalid"
                    label="状态"
                    width="300">
                <template slot-scope="scope">
                    {{scope.row.isvalid == '1' ? '有效':'无效'}}
                </template>
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-dropdown @command="LookFlowChart" trigger="click">
                        <el-button>
                            操作<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="scope.row.flowId+'-查看流程图-'+scope.row.isvalid">查看流程图</el-dropdown-item>
                            <el-dropdown-item :command="scope.row.flowId+'-修改-'+scope.row.isvalid+'-'+scope.row.moduleId">修改</el-dropdown-item>
                            <el-dropdown-item :command="scope.row.flowId+'-删除-'+scope.row.isvalid">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>

        <el-footer class="case-exam-footer">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="pageResult.total"
                    :page-size="pageResult.size"
                    class="pagination"
                    @current-change="handleIndexChange"
            >
            </el-pagination>
        </el-footer>


        <el-dialog
                title="流程步骤图"
                :visible.sync="dialogVisible"
                width="30%">
            <FlowChart :flowId="flowId" v-if="dialogVisible" ></FlowChart>
        </el-dialog>


        <el-dialog
                title="编辑流程"
                :visible.sync="dialogVisible2"
                width="30%">
            <AddorUpdate_flow v-on:refresh="refresh" :status="status" :moduleId="moduleId" :id="flowId" v-if="dialogVisible2" ></AddorUpdate_flow>
        </el-dialog>




    </div>
</template>

<script>


    import FlowService from '../../../model/common/flow/FlowService.js'
    var flowService =FlowService.getInstance();

    import FlowChart from './FlowChart.vue'
    import AddorUpdate_flow from './AddorUpdate_flow.vue'

    export default {
        name: "Flow",
        data(){
            return{
                status:'',
                pageResult:{},
                flow:{},
                flowId:'',
                dialogVisible :false,
                dialogVisible2 : false,
                moduleId:'',
            }
        },
        methods:{
            goBack(){
                history.back()
            },
            FindAll(){
                flowService.FindAll(this.flow).then(response=>{
                    this.pageResult = response.data.data
                })
            },
            handleIndexChange(index){
                this.flow.page = index
                this.FindAll();
            },
            search(){
                this.flow.page=1
                this.FindAll();
            },
            LookFlowChart(value){
                var val =value.split("-");
                if(val[2]==0){
                    this.$message.error("该流程无效!!")
                    return;
                }
                if(val[1] == '查看流程图'){

                    this.dialogVisible=true
                    this.flowId=val[0]
                }else if(val[1] == '修改'){
                    this.status='修改'
                    this.flowId=val[0]
                    this.moduleId=val[3]
                    this.dialogVisible2=true;
                }else if(val[1] == '删除'){
                    flowService.del(val[0]).then(()=>{
                        this.FindAll();
                    })
                }

            },
            addBtn(){
                this.status='添加'
                this.dialogVisible2=true;
            },
            refresh(){
                this.dialogVisible2=false
                this.FindAll();
            }

        },
        created(){
            this.FindAll();
        },
        components:{
            FlowChart,
            AddorUpdate_flow,
        }
    }
</script>

<style scoped>
    .case-exam-footer{
        width: 100%;
        position: relative;
    }
    .pagination{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
</style>
